
<div class="row mt-4">

  <div class="col-md-6 col-12 pe-lg-4">
    <div class="row">

      <!-- Create new database section -->
      <div class="col-12">
        <h3 class="fw-bold">Create database</h3>
        <p class="text-muted">Create a new internal SQLite database</p>
      </div>

      <div class="col-12 mt-3 mb-5">
        <form class="d-flex justify-content-lg-between align-items-lg-center align-items-end flex-lg-row flex-column w-100">

          <mat-form-field class="w-100 standalone-field custom-size">
            <span
              matPrefix
              matTooltip="Give your database a name"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2">
              <mat-icon>database</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <input
              matInput
              type="text"
              name="-"
              autocomplete="off"
              placeholder="Name of new database"
              [(ngModel)]="databaseName"
              [pattern]="CommonRegEx.appNameWithUppercaseHyphen" />
            <mat-error>{{CommonErrorMessages.appNameWithUppercaseHyphen}}</mat-error>
          </mat-form-field>

          <div class="p-lg-2"></div>

          <button
            mat-flat-button
            color="primary"
            type="submit"
            [disabled]="!databaseName || databaseName === ''"
            (click)="createNewDatabase()">
            Create
          </button>

        </form>
      </div>
    </div>
  </div>

  <!-- Databases table -->
  <div class="col-md-6 col-12 position-relative ps-lg-4">

    <h3 class="fw-bold">Internal databases</h3>

    <p class="text-muted">Internal SQLite databases you have already installed or created</p>

    <!-- Loading skeleton -->
    <ng-container *ngIf="isLoadingDbs">

      <app-loading-skeleton
        amount="8"
        colClass="col-12 mb-3"
        blockHeight="48px"
        hasShadow="false">
      </app-loading-skeleton>

    </ng-container>

    <!-- List of existing databases -->
    <div class="table-responsive mt-3" *ngIf="!isLoadingDbs">
      <table
        mat-table
        [dataSource]="existingDatabases"
        class="w-100 borderless hoverable">

        <!-- Name column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef class="text-nowrap ps-0">Name</th>
          <td mat-cell *matCellDef="let element" class="ps-0 text-truncate">{{element?.name}}</td>
        </ng-container>

        <!-- Tables column -->
        <ng-container matColumnDef="tables">
          <th mat-header-cell *matHeaderCellDef class="text-nowrap ps-0">Tables</th>
          <td mat-cell *matCellDef="let element" class="ps-0">{{element?.tables?.length ?? '-'}}</td>
        </ng-container>

        <!-- Actions column -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef class="ps-3">Actions</th>
          <td mat-cell *matCellDef="let element" class="px-0">

            <button
              mat-button
              color="primary"
              routerLink="/sql-studio"
              [queryParams]="{dbType: element.type, dbName: element.name, dbCString: element.connectionString}">
              Edit
            </button>

            <button
              mat-button
              color="primary"
              (click)="downloadDatabaseBackup(element)">
              Backup
            </button>

            <button
              mat-button
              color="warn"
              (click)="deleteDatabase(element)"
              [disabled]="element.name === 'magic'">
              Delete
            </button>

            <button
              mat-button
              color="primary"
              routerLink="/endpoint-generator"
              [queryParams]="{dbType: element.type, dbName: element.name, dbCString: element.connectionString}"
              [disabled]="element.name === 'magic'">
              Generate endpoints
            </button>

          </td>
        </ng-container>


        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

    <div class="text-end button-row w-100 upload-backup-row">

      <button
        mat-flat-button
        class="me-4"
        color="primary"
        (click)="zipfile.click()">
        Upload backup
      </button>

    </div>

    <input
      type="file"
      [(ngModel)]="zipFileInput"
      #zipfile
      class="d-none"
      accept=".db"
      (change)="uploadDatabaseBackup($event.target.files)">

  </div>
</div>
